<template>
  <div class="page-container">
    <div class="info-container">
      <div class="info-container_header">
        <div class="title">数据卡详情</div>
      </div>
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" :model="form.model" class="demo">
          <div class="form-section">
            <div class="form-section_title">基础信息</div>
            <AgelFormDesc :items="form.baseItems" :column="24"> </AgelFormDesc>
          </div>
          <div class="form-section">
            <div class="form-section_title">历史关联信息</div>
            <HistoryRecord v-if="form.model.cardId" :cardId="form.model.cardId"></HistoryRecord>
          </div>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="StationDataCardDetail" lang="tsx">
import HistoryRecord from '../common/history-record/index.vue'
import { getDataCard } from '@/api/station/dataCard/index';
import { defaultModel } from '@/api/station/dataCard/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { data_card_type, data_card_status, station_device_type } = toRefs<any>(proxy?.useDict('station_device_type', 'data_card_status', 'data_card_type'));

const route = useRoute();
const orderId = toRef<string | null>(route.query.id as string)

const form = reactive({
  model: defaultModel(),
  baseItems: [
    { prop: "cardNo", label: "卡号", span: 6 },
    {
      prop: "deviceType", label: "设备类型", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={data_card_type.value} value={form.model[prop]} />)
      }
    },
    { prop: "deviceNo", label: "设备编号", span: 6 },
    { prop: "regionName", label: "区域", span: 6 },
    {
      prop: "cardType", label: "类型", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={data_card_type.value} value={form.model[prop]} />)
      }
    },
    { prop: "expireTime", label: "有效期至", span: 6 },
    { prop: "restDays", label: "剩余天数", span: 6 },
    {
      prop: "status", label: "状态", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={data_card_status.value} value={form.model[prop]} />)
      }
    },
  ],
})
const loading = ref(false)

/** 取消 */
const handleCancel = () => {
  // proxy?.$tab.closeOpenPage()
  proxy?.$tab.closePage();
}
const getInfo = async (id: string) => {
  loading.value = true
  let res = await getDataCard(id)
  loading.value = false
  if (res.code == 200) {
    form.model = res.data
  } else {
    proxy?.$modal.msgError(res.msg || '创建失败！')
  }
}
if (orderId.value) {
  getInfo(orderId.value)
}
onMounted(() => {
})
</script>
